<template>
  <div class="app-container calendar-list-container">

    <!-- 搜索栏 -->
    <div class="search__option">
      <div class="search__condition">
        专家名称
        <el-input class="search__input" v-model="params.name" placeholder="请输入专家名称" />
      </div>
      <div class="search__condition">
        <el-button @click="hanldeSearchData" type="primary">查询</el-button>
      </div>
    </div>

    <!-- 列表 -->
    <el-table border :data="list" v-loading="loading" style="width: 100%">
      <el-table-column align="center" prop="id" label="专家 ID">
        </el-table-column>  <!--新增-->
      <el-table-column align="center" prop="name" label="专家名称">
        </el-table-column>
      <el-table-column align="center" prop="agencyName" label="专家机构">
        </el-table-column>  <!--新增-->
      <el-table-column align="center" prop="sort" label="权重值">
        </el-table-column>
      <el-table-column align="center" label="是否展示在首页" :formatter="ifendcase">
        </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <el-button @click="handleEdit(row)" size="small" type="primary">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

<el-dialog title="编辑专家信息" :visible.sync="dialogVisible" width="700px" :before-close="handleCancel"  > 

  <el-form ref="areaform" :model="tableList" :rules="rules" label-width="80px" class="common__form">

    <el-form-item  label="专家ID" prop="id">
      <el-input class="common__input form_id" clearable v-model="tableList.id" placeholder="请输入专家ID"/>
    </el-form-item>
    <el-form-item  label="专家名称" prop="name">
      <el-input class="common__input form_name" clearable v-model="tableList.name" placeholder="请输入专家名称" />
    </el-form-item>
    <el-form-item  label="专家机构" prop="agencyName">
      <el-input class="common__input form_agency_name" clearable v-model="tableList.agencyName" placeholder="请输入专家机构" />
    </el-form-item>
    <el-form-item  label="是否展示在首页">
      <!-- <el-input class="common__input form_star" clearable v-model="tableList.star" placeholder="请输入是否要展示在首页" /> -->
      <template>
        <el-radio v-model="tableList.star" :label="1">是</el-radio>
        <el-radio v-model="tableList.star" :label="0">否</el-radio>
      </template>
    </el-form-item>
    <el-form-item  label="权重值" prop="sort" v-model="tableList.sort">
      <div class="block">
        <el-slider v-model="tableList.sort" :max="1000" show-input class="form_sort">
        </el-slider>
        <span style="font-size: 12px">(权重值 0 ~ 1000 越高排序越靠前，权重值可以允许重复，重复的权重值依据专家创建日期排序，越近创建排序在越前)</span>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"  @click="submitForm">保存</el-button>
    </el-form-item>
  </el-form>

</el-dialog>
    <!-- 分页 -->
    <el-pagination v-show="!loading" class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNo" :page-sizes="[5, 10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"/>

  </div>
</template>

<script>
import { getName, getList, getChange } from '@/api/expert'

import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'professorList',
  data() {
    return {
      dialogVisible: false,
      loading: false,
      agencyDetails: {},
      list: [],
      tableList:{},
      total: null,
      params: {
        pageNo: 1,
        pageSize: 10,
        name: ''
      },
      rules :{
        name:[
          { required: true, message: '专家名称不能为空', trigger: 'change' }
        ],
        id:[
          { required: true, message: '专家ID不能为空', trigger: 'change' }
        ],
        sort:[
          { required: true, message: '权重值不能为空', trigger: 'change' }
        ]
      }
    }
  },

  created() {
    this.getListAll()
  },

  methods: {
    // 绑定一个方法转换 审核状态
    ifendcase(val){
      if(val.star == '0') { return '否' } else if(val.star == '1') { return '是' }
    },
    handleCancel() {
      this.dialogVisible = false
    },

    // 列表数据
    searchData() {
      getName(this.transParams())
        .then(({ data = {} }) => {
          if(this.transParams().name == ''){
            this.getListAll()
            return
          }
          this.loading = false
          this.list = data
          this.total = data.total
        })
        .catch(err => {
          this.loading = false
        })
    },
    getListAll(){
      this.loading = true
      this.list = []
      getList(this.transParams())
        .then(({ data = {} }) => {
          this.loading = false
          this.list = data.list
          this.total = data.total
        })
        .catch(err => {
          this.loading = false
        })
    },
    // 参数处理
    transParams() {
      return {
        ...this.params
      }
    },

    // 表单验证
    submitForm() {
      this.$refs['areaform'].validate((valid) => {
        if (valid) {
          const paramss = {}
          paramss['id'] = this.tableList.id
          paramss['name'] = this.tableList.name
          paramss['agencyName'] = this.tableList.agencyName
          paramss['sort'] = this.tableList.sort
          paramss['star'] = this.tableList.star

          getChange(paramss).then(response => {
            const { code, message } = response
            if (code == 0) {
              this.getListAll()
              this.dialogVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }else{
              this.$message({
                title: '失败',
                message: message,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    // 专家编辑
    handleEdit(row) {
      const transParams = {
        name:row.name,
        pageNo: 1,
        pageSize: 10
      }
      this.editDialog = true
      this.dialogVisible = true
      getName(transParams).then(res => {
        if(res.code == 0){
          this.tableList = res.data[0]
        }
      })
    },

    hanldeSearchData() {
      this.params.pageNo = 1
      this.searchData()
    },

    handleSizeChange(size) {
      this.params.pageSize = size
      this.getListAll()
    },

    handleCurrentChange(page) {
      this.params.pageNo = page
      this.getListAll()
    }

  } }
</script>

<style lang="scss" scoped>
.search__option {
  margin-bottom: 20px;
  .search__condition {
    display: inline-block;
    padding-right: 10px;
    padding-bottom: 20px;
  }
  .search__input {
    padding-left: 10px;
    width: 200px;
  }
}
.pagination {
  margin-top: 20px;
}
.common__form {
  margin: 40px auto 0;
  width: 600px;
  .common__input {
    width: 454px;
  }
  .form__remarks {
    padding: 0 0 30px 110px;
    font-size: 12px;
    color: #333;
  }
  .organize__tag {
    margin: 0 10px 10px 0;
  }
}
</style>
